import React, { useEffect } from 'react'
import * as echarts from 'echarts';
const chartStyle = {
    width: '100%',
    height: '500px',
    border: '1px solid #ddd',
    borderRadius: '15px',
    padding: '15px',
}
const BarChart = () => {
    var myChart:any
    useEffect(() => {
        var chartDom = document.getElementById('eitem');
         myChart = echarts.init(chartDom!);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '一周内系统数据分析'
            },
            tooltip: {},
            legend: {
                data: ['次数']
            },
            xAxis: {
                data: ['访问人数', '旅游日记', '注册用户', '意见条数', '广告订阅', '公告次数']
            },
            yAxis: {},
            series: [
                {
                    name: '次数',
                    type: 'bar',
                    data: [4000, 8888, 3000, 101, 200, 20]
                }
            ]
        };
        option && myChart.setOption(option);
    }, [])
     // 监听浏览器窗口大小改变事件，并根据新尺寸重新绘制图表
     window.addEventListener('resize', () => myChart.resize());
    // 使用刚指定的配置项和数据显示
    return (
        <div id="eitem" style={{width:'100%',height:'100%'}} >
        </div>
    )
}

export default BarChart